<template>
  <div class="chat-container">
    <!-- 聊天内容区域 -->
    <div class="chat-messages">
      <!-- 时间分割线 -->
      <div class="time-divider" v-if="messages.length > 0">
        {{ formatDate(new Date()) }}
      </div>
      
      <!-- 循环渲染消息 -->
      <div 
        class="message-item" 
        v-for="(msg, index) in messages" 
        :key="index"
      >
        <!-- 客服消息 - 居左（头像在气泡左侧） -->
        <div v-if="msg.from === 'service'" class="service-message">
          <div class="avatar">
            <van-icon name="service" size="36" />
          </div>
          <div class="message-bubble">
            <div class="message-content">{{ msg.content }}</div>
            <div class="message-time">{{ formatTime(msg.timestamp) }}</div>
          </div>
        </div>
        
        <!-- 用户消息 - 居右（头像在气泡右侧） -->
        <div v-else class="user-message">
          <div class="message-bubble">
            <div class="message-content">{{ msg.content }}</div>
            <div class="message-time">
              {{ formatTime(msg.timestamp) }}
              <van-icon name="check" size="12" class="read-status" />
            </div>
          </div>
          <div class="avatar">
            <van-icon name="user" size="36" />
          </div>
        </div>
      </div>
    </div>
    
    <!-- 输入区域 -->
    <div class="chat-input-area">
      <van-field
        v-model="inputMessage"
        placeholder="请输入消息..."
        rows="1"
        autosize
        class="message-input"
        @keyup.enter="sendMessage"
      />
      <van-button class="send-btn" @click="sendMessage" round type="primary">
        发送
      </van-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputMessage: '',
      messages: [
        { 
          from: 'service', 
          content: '您好！欢迎咨询淘书巴士客服中心，有什么可以帮助您的吗？',
          timestamp: new Date().getTime() - 30000
        }
      ]
    };
  },
  methods: {
    sendMessage() {
      if (!this.inputMessage.trim()) return;
      
      // 添加用户消息
      const newMsg = {
        from: 'user',
        content: this.inputMessage,
        timestamp: new Date().getTime()
      };
      this.messages.push(newMsg);
      
      // 清空输入框
      this.inputMessage = '';
      
      // 模拟客服回复
      setTimeout(() => {
        this.messages.push({
          from: 'service',
          content: '感谢您的留言，我们会尽快处理您的问题！工作时间：周一至周五 8:00-17:00',
          timestamp: new Date().getTime()
        });
        this.scrollToBottom();
      }, 1000);
      
      // 滚动到底部
      this.scrollToBottom();
    },
    // 格式化日期
    formatDate(date) {
      const year = date.getFullYear();
      const month = date.getMonth() + 1;
      const day = date.getDate();
      return `${year}年${month}月${day}日`;
    },
    // 格式化时间
    formatTime(timestamp) {
      const date = new Date(timestamp);
      const hours = date.getHours().toString().padStart(2, '0');
      const minutes = date.getMinutes().toString().padStart(2, '0');
      return `${hours}:${minutes}`;
    },
    // 滚动到底部
    scrollToBottom() {
      this.$nextTick(() => {
        const container = document.querySelector('.chat-messages');
        if (container) {
          container.scrollTop = container.scrollHeight;
        }
      });
    }
  },
  mounted() {
    this.scrollToBottom();
  }
};
</script>

<style scoped>
/* 聊天容器样式 */
.chat-container {
  background-color: #f9f5ed;
  min-height: 100vh;
  padding-bottom: 60px; /* 为输入区域留出空间 */
	padding-top: 26px;
}

/* 聊天消息区域 */
.chat-messages {
  padding: 15px;
  overflow-y: auto;
  height: calc(100vh - 54px - 60px);
}

/* 时间分割线 */
.time-divider {
  text-align: center;
  font-size: 12px;
  color: #8C8C8C;
  margin: 10px 0;
  padding: 4px 0;
}

/* 消息项容器 */
.message-item {
  margin-bottom: 15px;
  animation: fadeIn 0.3s ease;
}

/* 客服消息 - 居左 */
.service-message {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
}

/* 用户消息 - 居右 */
.user-message {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

/* 头像样式 */
.avatar {
  width: 40px;
  height: 40px;
  border-radius: 5px;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* 客服头像在气泡左侧 */
.service-message .avatar {
  margin-right: 8px;
}

/* 用户头像在气泡右侧 */
.user-message .avatar {
  margin-left: 8px;
}

/* 消息气泡容器 */
.message-bubble {
  max-width: 70%;
  display: flex;
  flex-direction: column;
}

/* 消息内容样式 */
.message-content {
  padding: 10px 15px;
  border-radius: 8px;
  word-wrap: break-word;
  position: relative;
  font-size: 16px;
  line-height: 1.5;
}

/* 客服消息气泡 */
.service-message .message-content {
  background-color: #FFFFFF;
  border-top-left-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* 用户消息气泡 */
.user-message .message-content {
  background-color: #8b4513;
  color: #FFFFFF;
  border-top-right-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* 消息时间样式 */
.message-time {
  font-size: 11px;
  color: #8C8C8C;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* 用户消息时间居右 */
.user-message .message-time {
  justify-content: flex-end;
}

/* 已读状态图标 */
.read-status {
  color: #8C8C8C;
}

/* 输入区域 */
.chat-input-area {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  padding: 8px 10px;
  background-color: #F5F5F5;
  border-top: 1px solid #E5E5E5;
  z-index: 10;
}

.message-input {
  flex: 1;
  margin-right: 10px;
  border-radius: 20px;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
  
  ::v-deep .van-field__control {
    min-height: 36px;
    padding: 6px 15px;
    font-size: 16px;
  }
}

.send-btn {
  width: 60px;
  height: 36px;
  line-height: 36px;
  padding: 0;
  background-color: #8b4513;
  border-color: #8b4513;
  color: white;
}

/* 消息出现动画 */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
</style>